<%@ page language="java" import="java.util.*,com.opensymphony.xwork2.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %> 



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HIFO管理平台</title>

<!-- css -->
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../css/padding.css">

<!-- js -->
<script src="../lib/ext/adapter/ext/ext-base-debug.js"></script>
<script src="../lib/ext/ext-all-debug.js"></script>

<script src="../admin/myextjs/padding.js"></script>




<script type="text/javascript">




	<%
	ValueStack vs=(ValueStack)request.getAttribute("struts.valueStack");
	String myjson=(String)vs.findValue("jsonData");
	%>
	
var record_start = 0;	

function cover_image(val){
  return '<img  width=50 height=50 src="http://we.51waji.com/picture/2016/3/'+val+'">';   
}

function cover_type(val){
	if(val==1)
		return "打卡";
	else if(val==2)
		return "行动";
	else
		return "";
}

function cover_state(val){
	if(val==0)
		return "待审";
	else if(val==1)
		return "通过";
	else if(val==2)
		return "不符";
	else if(val==3)
		return "重复";
	else if(val==4)
		return "异常";
}

function cover_dep(val){
	if(val=='a')
		return "集团";
	else if(val=='b')
		return "汇发";
	else if(val=='c')
		return "合锦";
	else if(val=='d')
		return "恒安";
	else
		return "未知";
}


function cover_time(value){
	if (value == null || value == 0) {
	return 'null'
	} else {
	return Ext.util.Format.date(new Date(parseInt(value)),'Y-m-d H:i:s');
	}
}

function cover_actvType(val){	//0: 1:'空白市场开发',2:'二级渠道开发',3:'新客户拜访',4:'老客户拜访',5:'商务谈判',6:'交机',8:'客户催款',7:'备注其他'
	if(val==1)
		return "空白开发";
	else if(val==2)
		return "渠道开发";
	else if(val==3)
		return "访新客户";
	else if(val==4)
		return "访老客户";
	else if(val==5)
		return "商务谈判";
	else if(val==6)
		return "交机";
	else if(val==7)
		return "备注其他";
	else if(val==8)
		return "客户催款";
	else if(val==9)
		return "电话拜访";
	else if(val==10)
		return "小挖开发";
	else if(val==11)
		return "电话催收";
	else
		return "";
}

// follow is ExtJs design code
//条件查询的页面  左右两列布局
Ext.onReady(function(){



	/*!
	 * Ext JS Library 3.2.0
	 * Copyright(c) 2006-2010 Ext JS, Inc.
	 * licensing@extjs.com
	 * http://www.extjs.com/license
	 */
	// some data used in the examples
	Ext.namespace('Ext.exampledata');




	//审核结果类型
	Ext.exampledata.state = [
			 [0, '----',0],    
			 [1, '通过',1],
			 [2, '不符合',2],
			 [3, '重复',3],
			 [4, '异常',4]
	];


	
	Ext.exampledata.test = <%=myjson%>;
	
	/*
	Ext.exampledata.test = [{"address":"四川省成都市成华区龙潭街道成都农商银行(同乐分理处)","actvType":"","name":"程茁","id":1826,"state":1,"type":1,"path":"2016/3","time":1458607952000,"province":"四川省","city":"成都市","checkmemo":"测试信息","memo":"说明啊啊aaadfdfdfdfdfdfdfdfdfdfdf山东分舵是否第三方第三方斯蒂芬但是啊啊啊啊","dep":"a","photo":"1_1458607951986_CHgN.jpg"},
	                        {"address":"四川省广元市利州区雪峰街道嘤鸣路166号","actvType":"","name":"汪勇","id":1822,"state":0,"type":1,"path":"2016/3","time":1458607504000,"province":"四川省","city":"广元市","checkmemo":"","memo":null,"dep":"b","photo":"10_1458607503754_Awnq.jpg"},
	                        {"address":"四川省成都市成华区龙潭街道成都农商银行(同乐分理处)","actvType":"","name":"程茁","id":1826,"state":0,"type":1,"path":"2016/3","time":1458607952000,"province":"四川省","city":"成都市","checkmemo":"","memo":null,"dep":"a","photo":"1_1458607951986_CHgN.jpg"},
	                        {"address":"四川省广元市利州区雪峰街道嘤鸣路166号","actvType":"","name":"汪勇","id":1822,"state":2,"type":1,"path":"2016/3","time":1458607504000,"province":"四川省","city":"广元市","checkmemo":"","memo":null,"dep":"b","photo":"10_1458607503754_Awnq.jpg"},
	                        {"address":"甘肃省白银市白银区纺织路街道莲花禅寺","actvType":"","name":"薛锡源","id":1829,"state":3,"type":1,"path":"2016/3","time":1458608080000,"province":"甘肃省","city":"白银市","checkmemo":"","memo":null,"dep":"b","photo":"11_1458608080306_CXvf.jpg"},
	                        {"address":"四川省成都市锦江区书院街街道成都市第二人民医院","actvType":"","name":"邓万民","id":1845,"state":0,"type":1,"path":"2016/3","time":1458609154000,"province":"四川省","city":"成都市","checkmemo":"","memo":null,"dep":"b","photo":"14_1458609154307_JnDt.jpg"},
	                        {"address":"甘肃省定西市漳县武阳镇漳县农村信用合作联社营业部(贵清园小区西)","actvType":"8","name":"刘成","id":496,"state":0,"type":2,"path":"2016/3","time":1458696811000,"province":"甘肃省","city":"定西市","checkmemo":"","memo":"[行动类型]新客户拜访|[描述]漳县拜访包军强","dep":"b","photo":"86_1458696811248_iaRQ.jpg"}
	                    ];

	*/
	
	//usergrid's data
	var userStore =  new Ext.data.JsonStore({   

		/*
	    data:[
	               {"address":"四川省成都市成华区龙潭街道成都农商银行(同乐分理处)","name":"程茁","id":1826,"state":0,"type":1,"path":"2016/3","time":1458607952000,"province":"四川省","city":"成都市","checkmemo":"","memo":null,"dep":"a","photo":"1_1458607951986_CHgN.jpg"},
	               {"address":"四川省广元市利州区雪峰街道嘤鸣路166号","name":"汪勇","id":1822,"state":0,"type":1,"path":"2016/3","time":1458607504000,"province":"四川省","city":"广元市","checkmemo":"","memo":null,"dep":"b","photo":"10_1458607503754_Awnq.jpg"},
	               {"address":"甘肃省白银市白银区纺织路街道莲花禅寺","name":"薛锡源","id":1829,"state":0,"type":1,"path":"2016/3","time":1458608080000,"province":"甘肃省","city":"白银市","checkmemo":"","memo":null,"dep":"b","photo":"11_1458608080306_CXvf.jpg"},
	               {"address":"四川省成都市锦江区书院街街道成都市第二人民医院","name":"邓万民","id":1845,"state":0,"type":1,"path":"2016/3","time":1458609154000,"province":"四川省","city":"成都市","checkmemo":"","memo":null,"dep":"b","photo":"14_1458609154307_JnDt.jpg"}
	           ],
		*/

		//data:Ext.exampledata.test,
		data:Ext.exampledata.test,
	    autoLoad:true,  
	    totalProperty:"results",  
	    idProperty:'id'+'type', 	//防止id相同 被视为一条数据
	    //root:'items',  
	    fields:['address',  
	            {name:'id',type:'int'},
	            {name:'name'},
	            {name:'path'},
	            {name:'photo'},
	            {name:'province'},
	            {name:'dep'},
	            {name:'city'},
	            {name:'clientName'},
	            {name:'clientCode'},
	            {name:'state',type:'int'},
	            {name:'type',type:'int'},
	            {name:'actvType',type:'int'},	//行动类型
	            {name:'memo'},
	            {name:'checkmemo'},
	            {name:'time',type:'long'}
	    ]  
	  }); 	
	
	
	
	//center combo 
	 var centerStore = new Ext.data.ArrayStore({
        fields: ['state', 'name'],
        data : Ext.exampledata.state // from data.js
    });
    
	 
	 
	var checkRadios = new Ext.form.RadioGroup ({
        columns: 3,		//显示为几列
        fieldLabel: '审核结果',
        name: 'state',
        id:'state',
        layout: 'form',
//A radio group: A setValue on any of the following 'radio' inputs using the numeric
//'rating' field checks the radio instance which has the matching inputValue.
        items: [{
            inputValue: 0,
            boxLabel: '待审',
            name: 'checked'
        }, {
            inputValue: 1,
            boxLabel: '通过',
            name: 'checked'
        }, {
            inputValue: 2,
            boxLabel: '不符',
            name: 'checked'
        }, {
            inputValue: 3,
            boxLabel: '重复',
            name: 'checked'
        }, {
            inputValue: 4,
            boxLabel: '异常',
            name: 'checked'
        }]

	}); 
	 
	
	
	
	
	
	
	
	/*
     var centerCombo = new Ext.form.ComboBox({
        store: centerStore,
        displayField:'name',
        typeAhead: true,
        mode: 'local',
        name:'state',
        id:'state',
        fieldLabel: '审核结果',
        width:135,
        forceSelection: true,
        triggerAction: 'all',
        //emptyText:'四川中心',
        selectOnFocus:true,
        //选择值关联centerId
        listeners:{
        	select: function(f,r,i){
        		//Ext.getCmp('centerId').setValue(i); 
        	}
        }
        
    });
    */
	
	var userForm=new Ext.FormPanel({
			id: 'userForm',		//选择模型中的方法需要id项 如：Ext.getCmp("company-form")
		    renderTo:'user',		
			frame: true,
		    width:300,
		    title: '详细信息',
		    margins:'35 5 5 0',
            layout:'fit',
            
            /*
         	//非ajax方式提交(一定要加)
          	onSubmit: Ext.emptyFn,
			submit: function(){
			this.getEl().dom.action = 'addUser'; //连接到服务器的url地址
			this.getEl().dom.submit();
			},
			*/
	        //########################    		
            
		    items: [{
                columnWidth:.9,
                baseCls:'x-plain',
                bodyStyle:'padding:5px 0 5px 5px',
                xtype: 'fieldset',
                defaultType: 'textfield',
                items:[{      
                    xtype: 'box', //或者xtype: 'component',  
                    id:'myphoto',
                    width: 150, //图片宽度      
                    height: 150, //图片高度      
                    autoEl: {      
                        tag: 'img',    //指定为img标签      
                        src: ''    //指定url路径      
                    }},{
            		    xtype: 'compositefield',	//同一行的两个按钮(有待改进)
            		    labelWidth: 120,
            		    items: [{
          		    	  xtype:'tbbutton',
        		    	  text:'图片刷新',
         		          width : 50,
         		         handler:function(){	// 最好用ajax方式进行
 	            			//userForm.getForm().submit();
 	            		}},{
          		    	  xtype: 'tbbutton',
        		    	  text:'原图查看',
         		          width:50,
         		         handler:function(){	//点击打开新窗口查看
         		        	window.open(document.getElementById("myphoto").src); 
 	            		}},{
            		    	   xtype:'textfield',
            		           fieldLabel:'',
            		           width:20,
            		           hidden:true,
            		           hideLabel:true,
            		           disabled:true 

            		       }
            		       
            		       
            		]},{
	                	fieldLabel: 'ID',
	                	id:'id',
	                    name: 'id',
	                    hidden:true,
	                    hideLabel:true,
	                    readOnly:true
                	},{
	                	fieldLabel: 'type',
	                	id:'type',
	                    name: 'type',
	                    hidden:true,
	                    hideLabel:true,
	                    readOnly:true
                	},{
		            	fieldLabel: '姓名',
		                name: 'name',
		                disabled:true 
		            },{
		            	fieldLabel: '时间',
		                name: 'time',
		                disabled:true 
		            },{
		            	xtype: "textarea",
	                    fieldLabel: "地址",
	                    id: "address",
	                    name:'address',
	                    labelWidth: 40,
	                    width: 140,
	                    height:50,
	                    disabled:true 
		            },{
	                	fieldLabel: "客户姓名",
	                	id:'clientName',
	                    name: 'clientName',
	                    disabled:true
                	},{
	                	fieldLabel: "客户识别码",
	                	id:'clientCode',
	                    name: 'clientCode',
	                    disabled:true
                	},{
		            	xtype: "textarea",
	                    fieldLabel: "扩展信息",
	                    id: "memo",
	                    name:'memo',
	                    labelWidth: 40,
	                    width: 140, 
	                    height:50,
	                    disabled:true 
		            },{
		            	xtype: "textarea",
	                    fieldLabel: "审核备注",
	                    id: "checkmemo",
	                    name:'checkmemo',
	                    labelWidth: 40,
	                    height:50,
	                    width: 140
		            } ,checkRadios,{
		            	xtype:'tbbutton',
		            	text:'审核提交',
		            	//button's function start
		           		handler:function(){
		           			/*
	            			userForm.getForm().submit({
	            				url:'gpscheck',
	            				method:'post',
	            				success:function(form,action){
	            					Ext.Msg.alert('OK','ok');
	            				},
	            				failure:function(form,action){		//只执行这句是为什么？
	            					Ext.Msg.alert('ERROR','error');
	            				}
	            			
	            			});
	            			*/
	            			Ext.Ajax.request({
								url : "gpscheck",
								method : "POST",
								params : {
								id : Ext.getCmp("id").value,
								type : userForm.getForm().findField('type').getValue(),
								checkmemo : userForm.getForm().findField('checkmemo').getValue(),
								checked : Ext.getCmp('state').getValue().inputValue	//radioGroup的取值
								//Ext.getCmp('state').getChecked()[0].inputValue;
								//checked : userForm.getForm().findField('checked').getValue()
								//Ext.getCmp("id").value,
								//type : Ext.getCmp("type").value,
								//checkmemo : Ext.getCmp("checkmemo").value,
								//state : Ext.getCmp("state").value
								//checked : Ext.getCmp("checked").value
								},
								callback : function(options, success, response) {
								if(success) {
								alert("操作成功");
								} else {
								alert("操作失败");
								}
								}
							});
	            			
	            		}	// handler end


	            	}
               			//button's function end

		            ]
		    }]
		});
	  
	  //userGrid ##############################################################################################
	    
	    


	    

	    // create the Grid  and load userStore from Local
	    var usergrid = new Ext.grid.GridPanel({
	        store: userStore,
	        //tbar: toolbar,		//工具栏
	        columns: [
	        	new Ext.grid.RowNumberer({width: 30}),
	        	{id:'id',header: 'id', sortable: true, dataIndex: 'id',hidden:true},
	  	        {header:'时间',dataIndex:'time',width: 115,sortable: true,renderer:cover_time},
	        	{header:'姓名', width: 75, sortable: true, dataIndex:'name'},
	        	{header:'类型', width: 55, sortable: true, dataIndex:'type',renderer:cover_type},
	        	{header:'行动', width: 55, sortable: true, dataIndex:'actvType',renderer:cover_actvType},
	        	{id:'address',header:'地点',width: 205, sortable: true, dataIndex:'address'},
	        	//{header:'photo',dataIndex:'photo',renderer:cover_image},
	        	{header:'部门', width: 75, sortable: true, dataIndex:'dep',renderer:cover_dep},
	            {header:'省', width: 75, sortable: true, dataIndex:'province'},
	            {header:'市', width: 75, sortable: true, dataIndex:'city'},
	            {header:'备注', width: 100, sortable: true, dataIndex:'checkmemo'},
	            {header:'状态', width: 75, sortable: true, dataIndex:'state',renderer:cover_state}	            
	        	],
	        	
	        	
	        	
	        stripeRows: true,
	        autoExpandColumn: 'address',	//该列必须有id配置项
	        height: 350,
	        width: 600,
	        title: '考勤/行动',
	        // config options for stateful behavior
	        stateful: true,
	        stateId: 'grid',

            sm: new Ext.grid.RowSelectionModel({  //附加网格模型 start
                singleSelect: true,
                listeners: {
                    rowselect: function(sm, row, rec) {
                        Ext.getCmp("userForm").getForm().loadRecord(rec); //将选择行的记录载入到表单
                        userForm.getForm().findField('time').setValue(cover_time(rec.get('time')));
                        //userForm.getForm().findField('state').setValue(rec.get('state'));
                        document.getElementById("myphoto").src="http://we.51waji.com/picture/"+rec.get('path')+'/'+rec.get('photo');
                        //userForm.getForm().findField('myimg').setValue(document.getElementById("myphoto").src);
                        
                        //alert(rec);
                     
                        
                        
				    }}           
            })		//附加网格模型 End
	        
	           
	        
	       
	        
	        
	        
	             
	    });
	    
	    // render the grid to the specified div in the page
	    //usergrid.render('grid-example');
	
	  
	  //userGrid END ######################################################################
	    
	  var toolbar = new Ext.Toolbar({
		  items:[{
              xtype: 'datefield',
              fieldLabel: 'Last Updated',
              name: 'date',
              id: 'date',
              format: 'Y-m-d' 
          },{
			  xtype:'tbbutton',
			  text:'查询',
			  //点击事件   
              handler:function(){   
                window.location.href="hf_check?date="+document.getElementById("date").value;   
              }   	  
		  }]
	  });  
	    
	  var viewport = new Ext.Viewport({
	          layout:'border',
	          items:[{region:'east',
	              id:'east-panel',
	              title:'审核',
	              split:true,
	              width: 300,
	              minSize: 175,
	              maxSize: 400,
	              collapsible: true,
	              margins:'5 0 5 5',
	              cmargins:'5 5 5 5',
	              layout:'accordion',
	              
	              layoutConfig:{
	                  animate:true
	              },
	              items: [userForm]
          		},{	  region:'center',
		        	  margins:'5 5 5 0',
		        	  layout:'column',
		        	  autoScroll:true,
		              title:'列表',
		              split:true,
		              tbar:toolbar,
		              collapsible: true,
		              margins:'5 0 5 5',
		              cmargins:'5 5 5 5',
		              layout:'accordion',
		              layoutConfig:{
		                  animate:true
		              },
		              items:[usergrid]
	               },{region:'west',
	 	              id:'west-panel',
		              title:'菜单',
		              split:true,
		              width: 150,
		              minSize: 75,
		              maxSize: 200,
		              collapsible: true,
		              collapsed :true,		//默认为收缩状态 
		              margins:'5 0 5 5',
		              cmargins:'5 5 5 5',
		              layout:'accordion',
		              
		              layoutConfig:{
		                  animate:true
		              },
		              items: [{}]
	          		}]	  
	  });
	  
	  
	  //###################################################

	  
	  
});





	
</script>




    
</head>
<body>
     <body><div  id="user"></div></body>  
</body>
</html>